import { Space } from 'antd';
import React from 'react';
export default () => {
    const url = React.useRef('http://images.pingan8787.com/TinyCompiler/111.png').current
    const [src, setSrc] = React.useState('')
    const download1 = function () {
        const xhr = new XMLHttpRequest()
        xhr.responseType = 'blob'
        xhr.open('get', url)
        xhr.onload = function () {
            console.log(xhr.response)
            renderImage(xhr.response)
        }
        xhr.send()
    }
    const download2 = function () {
        fetch(url).then((res) => {
            return res.blob()
        }).then((blob) => {
            renderImage(blob)
        })
    }
    const renderImage = (blob: Blob) => {
        const objectUrl = window.URL.createObjectURL(blob)
        setSrc(objectUrl)
    }
    const downloadText = () => {
        const blob = new Blob(['一文彻底掌握 Blob Web API'], { type: 'text/plain' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = "Blob文件.txt";
        link.click()
        link.remove()
        URL.revokeObjectURL(link.href)
    }
    return (
        <Space direction="vertical" style={{ width: '100%' }}>
            <button onClick={download1} >使用xmlHttpRequest获取blob</button>
            <button onClick={download2}>使用fetch获取blob</button>
            <img src={src} alt=""/>
            <button onClick={downloadText}>下载文本</button>
        </Space>
    )
}